import React from 'react';
import { observer, inject } from 'mobx-react';
import { Icon } from 'antd';
import { WeaPopoverHrm } from 'ecCom';
import './index.less';

@inject('edcSetGroupNoWriteStore')
@observer
export default class GroupPerson extends React.Component {
  constructor(props) {
    super(props);

    this.store = this.props.edcSetGroupNoWriteStore;
    this.store.init(props.pkId, props.id);
  }

  render () {
    const { hasInit, groupPerson, noWritePerson } = this.store;
    const filterGroupPerson = groupPerson.filter(person => !~noWritePerson.indexOf(person.id));
    
    return (
      <div className='content'>
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@u4li1x`} />
        {
          hasInit ?
          filterGroupPerson.map(person => (
            <li>
              <span>
                 <a 
                  href={`javaScript:openhrm(${person.id})`}
                  onClick={e => window.pointerXY(e)}
                >
                  {person.lastname}
                </a>
              </span>
              <span>{person.departmentName}</span>
            </li>
          )) : <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@wyuns7`} type="loading" />
        }
      </div>
    )
  }
}